<template>
  <div>
    <!-- 通过cell单元格依次组合 -->
    <!--
      样式调整：
      去边框，设置背景，取出原有背景
     -->
    <van-cell-group v-if="user" class="myBg">
      <!-- 顶部头像部分 -->
      <van-cell
        :title="userInfo.name"
        title-style="font-weight:700;font-size:17px;color:#fff"
        center
        class="myInfo"
        :border="false"
      >
        <van-image
          width="66"
          height="66"
          slot="icon"
          style="margin-right: 10px; border: 1px solid #fff"
          round
          fit="cover"
          :src="userInfo.photo"
        />
        <van-button size="mini" round style="height: 16px" to="/user/profile"
          >编辑资料</van-button
        >
      </van-cell>

      <!-- 个人数据 -->
      <van-grid :border="false" style="color: #fff">
        <van-grid-item text="头条">
          <span slot="icon">{{ userInfo.art_count }}</span>
        </van-grid-item>
        <van-grid-item text="关注">
          <span slot="icon">{{ userInfo.follow_count }}</span>
        </van-grid-item>
        <van-grid-item text="粉丝">
          <span slot="icon">{{ userInfo.fans_count }}</span>
        </van-grid-item>
        <van-grid-item text="获赞">
          <span slot="icon">{{ userInfo.like_count }}</span>
        </van-grid-item>
      </van-grid>
    </van-cell-group>
    <!-- 通过user判断，未登录状态 -->
    <div v-else class="notLogin" @click="$router.push('/login')">
      <img src="./touxiang.png" alt="" />
      <span>登录 / 注册</span>
    </div>

    <!-- 收藏等数据 -->
    <van-grid :column-num="2" :border="false">
      <van-grid-item icon="star-o" text="收藏"> </van-grid-item>
      <van-grid-item icon="browsing-history-o" text="历史记录"> </van-grid-item>
    </van-grid>

    <!-- 信息，页面跳转 退出登录 -->
    <van-cell title="消息通知" is-link to="index" style="margin-top: 15px" />
    <van-cell title="小智同学" is-link to="index" style="margin-top: 5px" />
    <van-cell
      v-if="user"
      title="退出登录"
      @click="loginOut"
      style="
        text-align: center;
        color: red;
        font-size: 18px;
        height: 45px;
        margin-top: 10px;
      "
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MyIndex',
  data () {
    return {
      userInfo: {}
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    loginOut () {
      this.$dialog.confirm({
        title: '退出提示',
        message: '确认退出吗？'
      })
        .then(() => { // 确认后执行
          // 删除vuex中user以及本地存储中的user数据
          this.$store.commit('setUser', null)// 两步一步到位
        })
        .catch(() => { // 取消后执行
          // on cancel
        })
    }
  },
  // 挂载时候获取用户的信息
  async created () {
    try {
      const { data: res } = await this.$https.get('/app/v1_0/user')
      this.userInfo = res.data
    } catch (error) {

    }
  }
}
</script>

<style scoped lang="less">
.myBg {
  background: url("./banner.png") no-repeat;
  .myInfo {
    height: 115px;
    padding-top: 35px;
    background-color: unset;
  }
  /deep/.van-grid-item__content {
    background-color: unset;
  }
}
/deep/.van-icon-star-o::before {
  color: #eb5235;
}
/deep/.van-icon-browsing-history-o::before {
  color: #ff9d1d;
}
.notLogin {
  display: flex;
  flex-direction: column;
  background: url("./banner.png") no-repeat;
  height: 180px;
  justify-content: center;
  align-items: center;
  img {
    width: 66px;
    height: 66px;
  }
  span {
    color: #fff;
  }
}
</style>
